<template>
  <view class="member-container">
    <!-- Member 会员单位 -->
    <Header :background-color="globalConfig?.themeColor" v-model="headerHeight">
      <template v-slot:header>
        <view class="custom-header">
          <view v-if="!layout" class="search-view">
            <UniSearchBar
              placeholder="请输入搜索内容"
              cancelButton="none"
              radius="35"
              bgColor="rgba(245, 245, 245, .3)"
              @confirm="searchFnc"
              @clear="restFnc"
            />
          </view>
        </view>
      </template>
    </Header>

    <template v-if="!isLoading">
      <YFilter :headerHeight="headerHeight" @submit="filterSubmit" />
      <MemberList :keyword="keyword" :filter-params="filterParams" />
    </template>
  </view>
</template>

<script lang="ts" setup>
  /**  Member  会员单位 */
  import Header from '@/components/Header/index.vue';
  import { ref } from 'vue';
  import UniSearchBar from '@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue';
  import MemberList from './components/MemberList.vue';
  import YFilter from './components/YFilter.vue';
  import { useAppStoreWithOut } from '@/store/modules/app';
  import { onLoad } from '@/router';

  /** 'charts' | 'list' */
  const layout = ref<boolean>(true);
  const headerHeight = ref(0);

  const isLoading = ref(true);
  onLoad(() => {
    isLoading.value = false;
  });

  const { globalConfig } = useAppStoreWithOut();

  // #ifdef MP
  uni.setBackgroundColor({
    backgroundColorTop: globalConfig?.themeColor,
  });
  // #endif

  const keyword = ref('');
  function searchFnc(e: { value: string }) {
    keyword.value = e.value;
  }
  function restFnc() {
    keyword.value = '';
  }

  const filterParams = ref({});
  function filterSubmit(params: { [x: string]: string | undefined }) {
    filterParams.value = params;
  }
</script>
<style lang="scss">
  .search-view {
    .uni-searchbar {
      padding: 0 !important;
    }
  }
</style>
<style lang="scss" scoped>
  .custom-header {
    display: flex;
    align-items: center;
    width: 100%;
    .switch {
      min-width: 100rpx;
      color: #fff;
      font-size: 22rpx;
      font-weight: 400rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 30rpx;

      .ali-icon {
        color: #fff;
        font-size: 35rpx;
        margin-bottom: 5rpx;
      }
    }

    .search-view {
      width: 380rpx;
    }
  }
</style>
